import React from "react";
import './AboutPage.css';
import {Button, Card,Flex} from "antd";
import {useNavigate} from "react-router-dom";
import MyTool from "../../components/MyTool/MyTool";

const AboutPage: React.FC = () => {
    // 定义一个 useNavigate 函数，路由跳转
    const navigate = useNavigate();

    /**
     * 跳转到“关于我们”页面
     */
    const handleGoToAbout = () => {
        // 点击按钮后跳转到 /about 页面
        navigate('/');
    };

    // 1. 定义一个要传递的对象
    const userData = {
        name: 'lixueya',
        age: 30,
        city: '北京',
    };

    /*<></> 语法被称为 Fragment（片段）。它的主要作用是让你在不引入额外 DOM 元素（比如 <div>）的情况下，将多个子元素组合在一起*/
    return (
        <>
            <Card className="aboutPage">
                <div>这是关于我们的页面</div>
                <MyTool data='张三' user={userData}/>
                <Flex wrap gap="small" className="site-button-ghost-wrapper">
                    <Button type="primary" danger onClick={handleGoToAbout}>回到首页</Button>
                    <Button color="primary" variant="filled">按钮1</Button>
                    <Button color="default" variant="dashed">按钮2</Button>
                    <Button color="default" variant="link">按钮3</Button>
                    <Button color="danger" variant="link">按钮4</Button>
                    <Button color="danger" variant="text">按钮5</Button>
                </Flex>
            </Card>
        </>
    );
}

export default AboutPage;
